<template>
  <div>
    <h2>自动播放</h2>
    <lbr-swipe :auto="4000" @change="handleChange" style="height:170px">
      <lbr-swipe-item>
        <img src="@/assets/banner.jpg" alt="" class="img" />
      </lbr-swipe-item>
      <lbr-swipe-item>
        <img src="@/assets/banner.jpg" alt="" class="img"
      /></lbr-swipe-item>
      <lbr-swipe-item>
        <img src="@/assets/banner.jpg" alt="" class="img"
      /></lbr-swipe-item>
    </lbr-swipe>
    <h2>关闭自动播放</h2>
    <lbr-swipe :auto="0" style="height:170px">
      <lbr-swipe-item>
        <img src="@/assets/banner.jpg" alt="" class="img"
      /></lbr-swipe-item>
      <lbr-swipe-item>
        <img src="@/assets/banner.jpg" alt="" class="img"
      /></lbr-swipe-item>
      <lbr-swipe-item>
        <img src="@/assets/banner.jpg" alt="" class="img"
      /></lbr-swipe-item>
    </lbr-swipe>
  </div>
</template>
<script>
export default {
  name: "swipe",
  data() {
    return {};
  },
  methods: {
    handleChange(index) {
      console.log(index);
    }
  }
};
</script>
<style lang="scss" scoped>
h2{
  text-align: center;
  margin: 30px 0;
  font-size: 20px;
}
.img {
  width: 100%;
  height: 100%;
}
</style>